<template>
   <div>
       <div class="h">头部
           <!-- 跳转方式 -->
        <!-- <a href="#/mymusic">进入音乐</a> -->
        <!--<a href="#/movie">进入电影</a> -->

        <!-- 命名方式 -->
        <router-link :to="{name:'music'}">进入音乐1</router-link>
        <router-link :to="{name:'music'}">进入音乐2</router-link>

        <!-- 路径方式 -->
        <router-link to="/movie">进入电影</router-link>        

       </div>
       <router-view class="b"></router-view>
       <div class="f">底部</div>
       
   </div>
</template>

<script>
   export default {
       data () {
       return {

       }
   },
   methods: {

   }
 }
</script>

<style scoped>
    .h{
        height: 100px;
        background-color: darkgoldenrod;
    }
    .b{
        height: 100px;        
        background-color:skyblue;
    }
    .f{
        height: 100px;
        background-color: darkcyan;
    }
</style>
